import React, { useState } from 'react'
import { useDispatch, useSelector } from 'react-redux';
import { ADDItem } from "../../../store/module/listSlice";
import { Input } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import style from "./writing.module.css";

function Index() {
  //左侧数据
  const commponentsData = useSelector(state => state.list.commponentsData)
  console.log(commponentsData);


  const dispatch = useDispatch()

  const dragstart = (value: any, type: any) => {
    // console.log(value);
    dispatch(ADDItem({ value: value, type }))
  }

  const dragstart1 = (value: any, type: any) => {
    // console.log(value);
    dispatch(ADDItem({ value: value, type }))
  }


  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'center', height: '50px' }}>
        <Input placeholder="搜索文字" prefix={<SearchOutlined />} className={style.inp} />
      </div>
      <div>
        {
          commponentsData.map((item: any, index: number) => {
            return <div key={index}>
              {
                item.children && item.children.map((v: any, i: number) => {
                  return <div key={i}
                    className={style.wz}
                    draggable
                    style={v.style}
                    data-index={i}  // 存储当前项目的索引
                    onDragStart={() => dragstart(v, 'Dtext')}
                    onDragOver={(e) => e.preventDefault()} 
                  >{v.text}</div>
                })
              }
            </div>
          })
        }
      </div>
      <div className={style.tu} ></div>
      <div className={style.write}>
        <h4>特效文字<span>全部</span></h4>
        {
          commponentsData.map((item: any, index: number) => {
            return <div key={index} className={style.imgs}
            >
              {
                item.imgalls && item.imgalls.map((v: any, i: number) => {
                  return <li key={i} draggable
                    style={v.style}
                    data-index={i}  // 存储当前项目的索引
                    onDragStart={() => dragstart1(v, 'Dimg')}
                  >
                    <img src={v} alt="" />
                  </li>
                })
              }
            </div>
          })
        }
      </div>
      <div className={style.write}>
        <h4>节日热点<span>全部</span></h4>
        {
          commponentsData.map((item: any, index: number) => {
            return <div key={index} className={style.imgs}>
              {
                item.imgalls2 && item.imgalls2.map((v: any, i: number) => {
                  return <li key={i}>
                    <img src={v} alt="" />
                  </li>
                })
              }
            </div>
          })
        }
      </div>
      <div className={style.write}>
        <h4>带货图文<span>全部</span></h4>
        {
          commponentsData.map((item: any, index: number) => {
            return <div key={index} className={style.imgs}>
              {
                item.imgalls3 && item.imgalls3.map((v: any, i: number) => {
                  return <li key={i}>
                    <img src={v} alt="" />
                  </li>
                })
              }
            </div>
          })
        }
      </div>
      <div className={style.write}>
        <h4>教育培训<span>全部</span></h4>
        {
          commponentsData.map((item: any, index: number) => {
            return <div key={index} className={style.imgs}>
              {
                item.imgalls4 && item.imgalls4.map((v: any, i: number) => {
                  return <li key={i}>
                    <img src={v} alt="" />
                  </li>
                })
              }
            </div>
          })
        }
      </div>
    </div>
  )
}

export default Index
